<template>
  <div class="g-box" style="padding: 25px">
    <div class="instance-num">
      <div class="pull-left">
        <el-progress type="circle" :percentage="70" :color="'#FFFFFF'" :width="100" :stroke-width="10"></el-progress>
      </div>
      <div class="text">
        <h3>实例在线状态</h3>
        <p>在线实例: 1</p>
        <p>全部实例: 1</p>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="instance-info pull-left">
      <el-row>
        <el-col :span="8">
          <div class="item">
            <div class="image-con">
              <img src="@/assets/img/comprehensive/icon-service-name.png">
            </div>
            <p>
              <span>服务名称：</span>
              <span>message-service</span>
            </p>
          </div>
          <div class="item">
            <div class="image-con">
              <img src="@/assets/img/comprehensive/icon-route-name.png">
            </div>
            <p>
              <span>路由名称：</span>
              <span>none</span>
            </p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="item">
            <div class="image-con">
              <img src="@/assets/img/comprehensive/icon-publisher.png">
            </div>
            <p>
              <span>发布者：</span>
              <span>superadmin</span>
            </p>
          </div>
          <div class="item">
            <div class="image-con">
              <img src="@/assets/img/comprehensive/icon-protect.png">
            </div>
            <p>
              <span>保护阈值：</span>
              <span>0</span>
            </p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="item">
            <div class="image-con">
              <img src="@/assets/img/comprehensive/icon-sort.png">
            </div>
            <p>
              <span>分组：</span>
              <span>DEAFULT_GROUP</span>
            </p>
          </div>
          <div class="item">
            <div class="image-con">
              <img src="@/assets/img/comprehensive/icon-metadata.png">
            </div>
            <p>
              <span>元数据：</span>
              <span>12</span>
            </p>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="clearfix"></div>
  </div>
</template>
<style lang="scss" scoped>
.instance-num {
  padding: 10px 30px;
  background-color: #50a6ed;
  border-radius: 10px;
  height: 130px;
  width: 320px;
  float: left;
  .text {
    float: left;
    margin-left: 30px;
    margin-top: 10px;
    color: #ffffff;
    h3, p {
      margin: 10px 0;
    }
    h3 {
      color: #ffffff;
      font-size: 14px;
      font-weight: normal;
    }
    p {
      font-size: 12px;
    }
  }
}
.instance-info {
  border: 1px solid #e2e8ee;
  margin-left: 30px;
  width: calc(100% - 350px);
  height: 130px;
  padding: 30px;
  font-size: 13px;
  color: #333333;
  border-radius: 5px;
  .item {
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
    .image-con {
      width: 25px;
      margin-right: 10px;
      img {
        width: 100%;
      }
    }
  }
}
/deep/ svg path.el-progress-circle__track {
  stroke: #95c8f2;
}
/deep/ .el-progress__text {
  font-size: 18px !important;
  color: white;
}
</style>